<template>
  <teleport to="body">
    <transition :name="path">
      <div
        v-if="visible"
        ref="taskModalDom"
        class="task-modal"
        :class="[positionPath]"
        :style="taskModalStyle"
        @contextmenu.prevent
      >
        <slot></slot>
      </div>
    </transition>
  </teleport>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useClickBlankHidden } from '@/hooks'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'TaskModal',
  props: {
    modelValue: {
      type: Boolean as PropType<boolean>,
      required: true
    },
    path: {
      type: String as PropType<'to-top' | 'to-left'>,
      default: 'to-top'
    },
    left: {
      type: Number as PropType<number>,
      default: null
    },
    positionPath: {
      type: String as PropType<'left' | 'right' | 'normal'>,
      default: 'right'
    }
  },
  emits: ['update:modelValue'],
  setup(props, ctx) {
    const taskModalDom = ref<HTMLElement>()
    const visible = ref<boolean>(props.modelValue)
    const taskModalStyle = computed(() => ({
      left: `${props.left}px`
    }))

    useClickBlankHidden(
      () => taskModalDom.value,
      () => {
        visible.value = false
      }
    )

    watch(
      () => props.modelValue,
      (val: boolean) => {
        visible.value = val
      }
    )

    watch(visible, (val: boolean) => {
      ctx.emit('update:modelValue', val)
    })

    return {
      visible,
      taskModalDom,
      taskModalStyle
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.task-modal {
  position: fixed;
  z-index: $z-index-task-modal;
  bottom: $task-bar-height;

  &.left {
    left: 0;
  }

  &.right {
    right: 0;
  }

  &.to-top-enter-active,
  &.to-top-leave-active {
    transition: all 0.3s ease !important;
  }

  &.to-top-enter-from,
  &.to-top-leave-to {
    opacity: 0.5;
    transform: translateY(100%);
  }

  &.to-left-enter-active,
  &.to-left-leave-active {
    transition: all 0.3s ease !important;
  }

  &.to-left-enter-from,
  &.to-left-leave-to {
    opacity: 0.5;
    transform: translateX(100%);
  }
}
</style>
